{% extends 'base.html' %}
{% load myfilter %}

{% block title %}
<title>黑蛇</title>
{% endblock %}

{% block css %}
<style>
    .ddd {
        display: flex;
        justify-content: space-between;
    }

</style>
{% endblock %}
{% block body %}
{% include 'header.html' %}
<div class="row col-md-8 col-md-offset-2 ">
    {% if status %}
    <h1>猜你喜欢<h2><span class="label label-default">{{ tag.category.title }}</span> <span class="label label-default">/</span>
        <span class="label label-default">{{ tag.title }}</span></h2></h1>
    {% else %}
    <h1>猜你喜欢<h2><span class="label label-default">{{ category.title }}</span></h2></h1>
    {% endif %}
    <hr>
    {% csrf_token %}
    <div class="ddd">
        {% for course in courses %}
        <div class="col-sm-6 col-md-4">

            <div class="thumbnail">
                <video width="100%" height="100%" controls>
                    <source src="/media/{{ course.video }}" type="video/mp4">
                </video>
                <div class="caption">
                    <h3>{{ course.title }}</h3>
                    <p>{{ course.info }}</p>
                    <span>售价：{{ course.price }}</span>&nbsp&nbsp&nbsp
                    <span>作者：{{ course.author }}</span>
                    <!--标签-->
                    <br>
                    {% for t in course.tag.all %}
                    <span class="label mytag ">{{ t.title }}</span>
                    {% endfor %}
                    <br>
                    <br>
                    <p>
                        <a class="btn btn-default" href="{% url 'main:course_details' course.id %}"
                           role="button">查看详情</a>
                        {% if request.user.is_authenticated %}
                        {% if course|has_buy_order:request.user %}
                        <button type="button" class="btn btn-success buy{{ course.id }} buy"
                                data-course-id="{{ course.id }}">
                            移除购物车
                        </button>
                        {% else %}
                        <button type="button" class="btn btn-default buy{{ course.id }} buy"
                                data-course-id="{{ course.id }}">
                            添加到购物车
                        </button>
                        {% endif %}

                        {% if course|has_collection:request.user %}
                        <a class="btn"><img class="collect{{ course.id }}  collect   " data-course-id="{{ course.id }}"
                                            src="/static/img/collected.png"></a>
                        {% else %}
                        <a class="btn"><img class="collect{{ course.id }}  collect  " data-course-id="{{ course.id }}"
                                            src="/static/img/collect.png"></a>
                        {% endif %}
                        {% else %}
                        <a  class="btn btn-default" href="{% url 'user:login' %}">添加到购物车</a>
                          <a href="{% url 'user:login' %}" class="btn"><img  src="/static/img/collect.png"></a>

                        {% endif %}

                    </p>
                </div>
            </div>

        </div>
        {% endfor %}
    </div>
</div>
{% include 'footer.html' %}
{% endblock %}

{% block js %}
<script>
    $(function () {
        $(".collect").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                //  获取书id
                $.ajax({

                    url: "/operation/change_collect/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("取消收藏")

                            $(`.collect${courseId}`).attr("src", "/static/img/collect.png");


                        } else {
                            console.log("收藏成功")
                            $(`.collect${courseId}`).attr("src", "/static/img/collected.png");

                        }
                    }
                });
            }
        )
    })


    $(function () {
        $(".buy").click(function () {
                const courseId = $(this).data('course-id');
                console.log(courseId)
                $.ajax({

                    url: "/operation/buy_order_change/",
                    method: "post",
                    //  制作post  发送的信息
                    data: {
                        "csrfmiddlewaretoken": $('[type="hidden"]').val(),
                        "course_id": courseId
                    },
                    success: function (data) {
                        if (data.data.state) {
                            console.log("取消收藏")
                            $(`.buy${courseId}`).removeClass("btn-success");
                            $(`.buy${courseId}`).html("添加到购物车")
                        } else {
                            console.log("收藏成功")
                            $(`.buy${courseId}`).addClass("btn-success");
                            $(`.buy${courseId}`).html("移除购物车");

                        }
                    }
                });
            }
        )
    })
</script>
{% endblock %}